<template>
  <div class="demo-box">
    <h2>basic scroll</h2>
    <div class="list-wrap" ref="listWrap">
      <div class="scroll-content">
        <ul class="list">
          <li :class="`list-item item-${i + 1}`" v-for="(item, i) of items" :key="item" @tap="clickItem(item, $event)">{{ item }}</li>
        </ul>
      </div>
    </div>
    <div class="btns">
      <button @click="destroy">click destroy</button> |
      <button @click="scrollToEle">scrollToEle</button> |
    </div>
  </div>
</template>

<script lang="ts">
import { ref, defineComponent, onMounted } from 'vue'
import {BScroll} from "../../better-scroll";
export default defineComponent({
  name: 'BscrollDemo',
  props: {

  },
  setup() {
    const items: string[] = [];
    let itemIndex = 0;
    for (let i = 0; i < 30; i++) {
      items.push('I am No.' + ++itemIndex + ' line');
    }
    const listWrap = ref<HTMLElement>();
    let bscroll: BScroll;
    onMounted(() => {
      if (listWrap.value) {
        bscroll = new BScroll(listWrap.value, {
          tap: true,
          bindToWrapper: true,
          // startY: -338
        });
        bscroll.on('refresh', () => {
          console.log('refresh');
        });
        bscroll.on('flick', () => {
          console.log('on flick');
        });
        bscroll.on('destroy', () => {
          console.log('on destroy');
        });
      }
    });
    const destroy = () => {
      bscroll.destroy();
    }
    const scrollToEle = () => {
      bscroll.scrollToElement('.item-14', 300);
    }
    const clickItem = (item: string, event: Event) => {
      console.log('clickItem tap', item, event);
    }
    return {
      items,
      listWrap,
      clickItem,
      scrollToEle,
      destroy
    }
  }
})
</script>
<style scoped lang="scss">
  .demo-box {
    padding: 14px;
    h2 {
      text-align: center;
    }
  }
  .list-wrap {
    max-height: 391px;
    border-radius: 4px;
    border: 1px solid rgba(0,0,0,0.1);
    overflow: hidden;
    /*padding-top: 20px;*/
    .list {
      list-style: none;
      padding: 0;
      margin: 0;
      .list-item {
        padding: 14px;
        font-size: 18px;
        border-bottom: 1px solid #e5e5e5;
        &:last-child {
          border-bottom: none;
        }
      }
    }
  }
</style>
